<template>
  <div class="payer-info-card">
    <div class="bg">
      {{ type }}
    </div>
    <div class="payName">
      {{ payerName }}
    </div>
    <div class="payNum">
      {{ payerNum | formatStringFilter }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'vx-pay-info',
  props: {
    type: {
      type: String,
      default: '基本户',
    },
    payerName: {
      type: String, //  付款账户名称
      default: '',
    },
    payerNum: {
      type: String, //  付款账号
      default: '',
    },
  },
};
</script>

<style lang="scss">
.payer-info-card {
  opacity: 0.8;
  width: 280px;
  height: 120px;
  background: linear-gradient(180deg, #4072ee, #3457dd);
  border-radius: 4px;
  margin-top: 7px;
  position: relative;
  overflow: hidden;
  .bg {
    background: url('~@/assets/image/transferRemit/basic.png') no-repeat;
    width: 44px;
    height: 36px;
    background-size: contain;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    right: 11px;
    top: 0;
    color: #aec5ff;
  }
  .payName {
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #ffffff;
    line-height: 20px;
    margin: 30px 0 9px 16px;
  }
  .payNum {
    color: #ffffff;
    margin-left: 16px;
    font-size: 16px;
  }
}
</style>
